/**
校级管理员新增
*/
<template>
    <div>
        <div v-if="ifShowList === 'list'">
            <condition-card
                @reset="reset"
                @search="onSubmit"
                label-position="right"
                label-width="150px"
            >
                <el-row :gutter="24" style="height: 50px;">
                    <el-col :span="8">
                        <el-form-item label="项目开始时间">
                            <el-date-picker
                                :placeholder="$t('请选择')"
                                v-model="queryForm.condition.projectStartTime"
                                type="date"
                                style="width:100%"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :picker-options="startDatePicker"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="项目结束时间">
                            <el-date-picker
                                :placeholder="$t('请选择')"
                                v-model="queryForm.condition.projectEndTime"
                                type="date"
                                style="width:100%"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :picker-options="endDatePicker"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="培养层次">
                            <el-select
                                multiple
                                v-model.trim="queryForm.condition.trainings"
                                clearable
                                filterable
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.trainingLevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24" style="height: 50px;">
                    <el-col :span="8">
                        <el-form-item label="留学内容">
                            <el-input
                                :placeholder="$t('请输入')"
                                v-model="queryForm.condition.projectStudyAbroadContent"
                                class="topic-input-select"
                                maxlength="32"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('启用状态')">
                            <el-select
                                v-model="queryForm.condition.enableStatus"
                                clearable
                                style="width: 100%"
                            >
                                <el-option label="启用" :value="1"></el-option>
                                <el-option label="停用" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 搜索框结束 -->

                <!-- 列表页开始 -->
            </condition-card>
            <el-card shadow="never" v-loading="loading" body-style="padding: 24px;">
                <h1 class="condition-title">{{$t('校际交流校级项目列表')}}</h1>
                <div class="sub-title">
                    <div class="float-right" style="display: flex;">
                        <!-- 删除 -->
                        <el-button type="danger" @click="batchDeleteClick">删除</el-button>
                        <!-- 新增 -->
                        <el-button type="primary" @click="adminAdd()">新增</el-button>
                    </div>
                </div>
                <edu-table
                    :pagination="false"
                    :order="true"
                    :tooltipEffect="tooltipEffect"
                    stripe
                    :data="dataList"
                    size="mini"
                    @selection-change="handleSelectionChange"
                >
                    <edu-table-column label="培养层次" prop="trainingLevelName"></edu-table-column>
                    <edu-table-column label="项目名称" prop="projectName"></edu-table-column>
                    <edu-table-column label="项目联系人" prop="projectContactName" width="100"></edu-table-column>
                    <edu-table-column label="国家/地区" prop="projectNationName"></edu-table-column>
                    <edu-table-column label="合作大学" prop="projectCollegeCnName"></edu-table-column>
                    <edu-table-column label="项目开始时间" prop="projectStartTime" width="120"></edu-table-column>
                    <edu-table-column label="项目结束时间" prop="projectEndTime" width="120"></edu-table-column>
                    <edu-table-column label="项目所涉及学院" prop="projectInvolvedFacultyName" width="120"></edu-table-column>
                    <edu-table-column label="每年的中方留学生名额" prop="projectInlandNumber" width="160"></edu-table-column>
                    <edu-table-column label="每年的外方留学生名额" prop="projectOutlandNumber" width="160"></edu-table-column>
                    <edu-table-column label="留学内容" prop="projectStudyAbroadContent"></edu-table-column>
                    <edu-table-column label="启用状态" prop="enableStatus">
                        <template slot-scope="scope">
                            <el-tag
                                v-if="scope.row.enableStatus === 1"
                                type="success"
                                plain
                            >{{ scope.row.enableStatus | enableStatus }}</el-tag>
                            <el-tag
                                v-else-if="scope.row.enableStatus === 0"
                                type="danger"
                                plain
                            >{{ scope.row.enableStatus | enableStatus }}</el-tag>
                        </template>
                    </edu-table-column>
                    <!-- 操作 -->
                    <edu-table-column :label="$t('base.operate')" fit width="200">
                        <template slot-scope="scope">
                            <el-button type="text" @click="viewAudit(scope.row)">查看</el-button>
                            <el-button type="text" @click="editApp(scope.row)">编辑</el-button>
                            <el-button type="text" @click="deteOutline(scope.row)">删除</el-button>
                            <el-button type="text" @click="changeProjectManage(scope.row)">
                                <span
                                    v-if="scope.row.enableStatus === 1 && permitToClose"
                                >{{ $t('externamExchangeBase.deactivate') }}</span>
                                <span
                                    v-else-if="scope.row.enableStatus === 0 && permitToOpen"
                                >{{ $t('externamExchangeBase.enable') }}</span>
                            </el-button>
                        </template>
                    </edu-table-column>
                </edu-table>
                <el-row type="flex" class="row-bg" justify="end">
                    <el-col>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="queryForm.pageNum_"
                            :page-sizes="[20, 40, 80, 100]"
                            :page-size="queryForm.pageSize_"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="queryForm.total_"
                            style="float:right;margin-top:10px"
                        ></el-pagination>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <div v-if="ifShowList ==='view'">
            <inter-School-Com-View @returnVal="changekey" :projectId="projectId"></inter-School-Com-View>
        </div>
        <div v-if="ifShowList ==='add'">
            <inter-School-Com-App
                @returnVal="changekey"
                :submitType="submitType"
                :projectId="projectId"
                :pageFrom="pageFrom"
            ></inter-School-Com-App>
        </div>
        <div v-if="ifShowList ==='edit'">
            <inter-School-Com-Edit
                @returnVal="changekey"
                :submitType="submitType"
                :projectId="projectId"
                :pageFrom="pageFrom"
            ></inter-School-Com-Edit>
        </div>
    </div>
</template>
<script>
import conOfIntAcaConApi from 'common/src/api/internationalCommunication/conOfIntAcaCon'
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import InterSchoolComApp from './InterSchoolComApp'
import InterSchoolComView from './common/InterSchoolComView'
import interSchoolComEdit from './common/interSchoolComEdit'
import forumProject from 'common/src/api/academicForums/forumProject'

export default {
    components: {
        'inter-School-Com-Edit': interSchoolComEdit,
        'inter-School-Com-View': InterSchoolComView,
        'inter-School-Com-App': InterSchoolComApp
    },

    data() {
        return {
            permitToClose: true,
            permitToOpen: true,
            queryForm: {
                pageNum_: 1,
                pageSize_: 20,
                total_: 0,
                condition: {
                    projectStartTime: '',
                    projectEndTime: '',
                    trainings: [],
                    projectStudyAbroadContent: '',
                    enableStatus: ''
                }
            },
            submitType: '',
            pageFrom: '',
            id: '',
            dataList: [],
            contentForm: {
                content: ''
            },
            projectId: null,
            projectIdList: [],
            ifShowList: 'list',
            dialogFormVisible: false,
            multipleSelection: [],
            options: {
                country: [],
                trainingLevel: []
            }
        }
    },
    computed: {
        startDatePicker() {
            let _this = this
            return {
                disabledDate: value => {
                    if (_this.queryForm.condition.projectEndTime) {
                        if (
                            value.getTime() >
                            new Date(
                                _this.queryForm.condition.projectEndTime.split(' ')[0]
                            ).getTime()
                        ) {
                            return true
                        }
                    }
                    return false
                }
            }
        },
        endDatePicker() {
            let _this = this
            return {
                disabledDate: value => {
                    if (_this.queryForm.condition.projectStartTime) {
                        if (
                            value.getTime() + 24 * 60 * 60 * 1000 <
                            new Date(
                                _this.queryForm.condition.projectStartTime.split(' ')[0]
                            ).getTime()
                        ) {
                            return true
                        }
                    }
                    return false
                }
            }
        }
    },
    created() {
        // 初始化列表页
        this.getListData()
        this.getCountry()
        this.getTeacherLevel()
    },
    filters: {
        enableStatus(val) {
            switch (val) {
                case 0:
                    return '停用'
                case 1:
                    return '启用'
                default:
                    return val
            }
        }
    },
    methods: {
        // 字典获取 国家
        async getCountry() {
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: [
                    'G_GJQU' // 国家/地区
                ]
            }
            await queryDic(data).then(res => {
                UTILS.fillSelect(
                    {
                        country: 'G_GJQU' // 国家/地区
                    },
                    res.data,
                    this.options
                )
            })
        },

        // 字典获取培养层次
        async getTeacherLevel() {
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: [
                    'X_PYCC' // 培养层次
                ]
            }
            await queryDic(data).then(res => {
                UTILS.fillSelect(
                    {
                        trainingLevel: 'X_PYCC' // 培养层次
                    },
                    res.data,
                    this.options
                )
            })
        },
        test() {},
        // 导出目录
        exportMenu() {
            let _this = this
            let parm = {
                enableStatus: this.queryForm.condition.enableStatus,
                trainings: this.queryForm.condition.trainings,
                projectStudyAbroadContent: this.queryForm.condition.projectStudyAbroadContent,
                name: this.queryForm.condition.name,
                ids: this.multipleSelection.ids
            }
            conOfIntAcaConApi.exportExcelF(parm).then(res => {
                if (res.data && res.data.key) {
                    setTimeout(() => {
                        conOfIntAcaConApi.exportExcelS(res.data.key).then(resS => {
                            if (resS.data && resS.data.path) {
                                conOfIntAcaConApi.exportExcelT(resS.data.path).then(resT => {
                                    _this.$message({
                                        message: _this.$t('base.exportSuccess'),
                                        type: 'success'
                                    })
                                })
                            } else {
                                _this.exportMenu()
                            }
                        })
                    }, 3000)
                }
            })
        },
        // 申请页返回
        changekey(val) {
            this.multipleSelection = []
            this.ifShowList = val
            this.getListData()
        },
        // 新增
        adminAdd() {
            this.ifShowList = 'add'
            this.submitType = 'add'
            this.pageFrom = 'admin'
            this.id = ''
        },
        // 查看
        viewAudit(row) {
            this.ifShowList = 'view'
            this.projectId = row.projectId
        },
        // 编辑
        editApp(row) {
            this.ifShowList = 'edit'
            this.submitType = 'edit'
            this.pageFrom = 'app'
            this.projectId = row.projectId
        },
        // 批量删除
        batchDeleteClick() {
            if (this.multipleSelection.length > 0) {
                let deleteArray = this.multipleSelection.map(item => {
                    return item.projectId
                })
                this.$delConfirm(this.$t('message.areYouSureDelete'), this.$t('message.prompt'), {
                    confirmButtonText: this.$t('message.confirm'),
                    cancelButtonText: this.$t('message.cancel'),
                    type: 'warning'
                }).then(() => {
                    forumProject.deleteProject({ projectIdList: deleteArray }).then(res => {
                        if (res.code === 200) {
                            this.$message.success(this.$t('删除成功'))
                            this.onSubmit()
                        }
                    })
                })
            } else {
                this.$message.error(this.$t('请勾选数据'))
            }
        },
        // 单个删除
        deteOutline(row) {
            this.$delConfirm().then(_ => {
                forumProject.deleteProject({ projectIdList: [row.projectId] }).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: this.$t('externamExchangeBase.operateSuccessfully')
                        })
                        this.onSubmit()
                    }
                })
            })
        },

        // 停用/启用项目
        changeProjectManage(row) {
            forumProject
                .changeProjectStatus({
                    projectId: row.projectId,
                    enableStatus: row.enableStatus === 1 ? 0 : 1
                })
                .then(res => {
                    if (res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: this.$t('externamExchangeBase.operateSuccessfully')
                        })
                        this.onSubmit()
                    }
                })
        },
        // 重置筛选框
        reset() {
            this.queryForm = {
                pageNum_: 1,
                pageSize_: 20,
                total_: 0,
                condition: {
                    projectStartTime: '',
                    projectEndTime: '',
                    trainings: [],
                    projectStudyAbroadContent: '',
                    enableStatus: ''
                }
            }
            this.getListData()
        },

        // 查询按钮
        onSubmit() {
            this.queryForm.pageNum_ = 1
            this.queryForm.total_ = 0
            this.queryForm.pageSize_ = 20
            this.getListData()
        },

        // 获取列表
        getListData() {
            let _this = this
            this.dataList = []
            forumProject.listSchoolLevelProject(this.queryForm).then(res => {
                res.data.list.forEach(revList => {
                    _this.dataList.push(revList)
                    _this.queryForm.pageSize_ = res.data.pageSize_
                    _this.queryForm.total_ = res.data.total_
                    _this.queryForm.pageNum_ = res.data.pageNum_
                })
            })
        },

        handleSelectionChange(val) {
            this.multipleSelection = val
        },

        handleSizeChange(val) {
            this.queryForm.pageSize_ = val
            this.getListData()
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val
            this.getListData()
        }
    }
}
</script>
<style lang="scss" scoped>
.condition-title {
    color: #2b3b4e;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
}
.sub-title {
    margin: 16px 0 65px 0;
    font-size: 16px;
    color: #000020;
    letter-spacing: 0;
}
</style>
